<!--
 * @Author: Guiter 1336263157@qq.com
 * @Date: 2023-11-17 17:42:59
 * @LastEditors: Guiter 1336263157@qq.com
 * @LastEditTime: 2023-11-29 19:49:06
 * @FilePath: \nuxt3-music-player\src\components\Footer\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts"></script>

<template>
  <div class="border-t-default box-border h-25 w-full px-10">
    <div class="grid grid-flow-col grid-cols-[20rem_1fr_20rem] h-full">
      <div class="flex items-center">
        <nuxt-img src="王冰冰.jpg" class="h-20 w-20 rounded-md" />
        <div class="box-border h-20 flex flex-col justify-around pl-2">
          <div class="text-xl font-semibold">
            <span>最佳损友</span>
            <span>陈奕迅</span>
          </div>
          <div class="flex items-center">
            <svg-icon name="music-dislove" class="h-7 w-7"></svg-icon>
            <svg-icon name="music-comment" class="h-7 w-7 pl-1"></svg-icon>
            <svg-icon name="music-download" class="h-6 w-6 pl-1"></svg-icon>
          </div>
        </div>
      </div>
      <div class="flex items-center justify-center">中</div>
      <div class="flex items-center justify-center">右</div>
    </div>
  </div>
</template>
